<template>
	<b-submit-page bottomExtraClass="bg-color-1 bottom-shadow" bottomPdClass="p-2-2">
		<view class="p-3-1 border b-active-op20 rounded-m mb-2-2 mx-1-3">
			<view class="row-center mb-2-2">
				<text class="text-n color-main block">订单编号: {{ orderData.orderNo }}</text>
				<view class="flex-1" />
				<text class="text-n color-main block">{{ getOrderStatusText(orderData.status) }}</text>
			</view>
			<view class="row-center">
				<text class="text-n color-main block">下单时间: {{ dateFormat(orderData.orderTime, 'yyyy-MM-dd hh:mm') }}</text>
				<view class="flex-1" />
				<text class="text-n color-main block">订单金额: ¥{{ orderData.orderAmount }}</text>
			</view>
		</view>
		<view
			class="p-3-1 border b-active-op20 rounded-m row-center mb-2-2 mx-1-3"
			hover-class="bg-primary-op10"
			hover-start-time="0"
			hover-stay-time="50"
		>
			<view class="mr-3-1">
				<text class="iconfont icon-dingwei color-main text-xxl"></text>
			</view>
			<view class="flex-1">
				<view class="mb-1-3 row-center">
					<text class="color-main font-semibold mr-2 text-m">{{ orderData.name }}</text>
					<text class="color-main font-semibold text-m">{{ orderData.phone }}</text>
				</view>
				<view>
					<text class="color-secondary text-m">
						{{ orderData.address }}
					</text>
				</view>
			</view>
		</view>
		<view class="border b-active-op20 rounded-m mx-1-3 mb-2-2 pt-2-2 px-2-2">
			<view class="rounded-xl flex flex-row items-stretch mb-2-2" v-for="el in orderData.detail" :key="el.id">
				<!-- <view class="rounded-xl border b-active overflow-hidden mr-2">
					<c-img :src="el.thumbnail" :width="200" :height="200" />
				</view> -->
				<view class="flex-1 flex flex-column">
					<view class="row-center mb-2 break-all">
						<text class="color-main font-semibold text-m">{{ el.productName || el.name }}</text>
					</view>
					<view>
						<text class="color-disable text-m block">{{ el.specifications }}</text>
					</view>
					<view class="flex-1" />
					<view class="row-center">
						<view class="flex-1">
							<text class="color-main font-semibold text-m mr-1-3">¥</text>
							<text class="color-main text-xl">{{ el.price }}</text>
						</view>
						<view>
							<text class="color-main text-m">x {{ el.quantity }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="border b-active-op20 rounded-m mx-1-3 mb-2-2">
			<!-- <c-list-item title="商品金额" hideArrow>
				<template #suffix>
					<text class="color-main text-m font-semibold"> ¥{{ intlNumberFormat(orderDataPrice) }} </text>
				</template>
			</c-list-item> -->
			<picker
				mode="selector"
				:range="getGoodWay"
				range-key="label"
				@change="getGoodWayChange"
				:value="curGoodWayIndex"
				:disabled="true"
			>
				<c-list-item title="提货方式" :tip="getGoodWay[curGoodWayIndex].label" hideArrow> </c-list-item>
			</picker>
			<c-list-item title="配送时间" :tip="orderData.deliveryTime" hide-arrow> </c-list-item>
			<c-list-item title="运费" hideArrow v-if="curGoodWayIndex === 1">
				<template #suffix>
					<text class="color-main text-m font-semibold">¥{{ deliveryFee }}</text>
				</template>
			</c-list-item>
			<!-- <c-list-item title="优惠券" tip="暂无可用" v-if="!actData"> </c-list-item>s -->
			<!-- <view class="text-right pb-2-2 pr-3-1">
				<text class="text-m color-main">合计: </text>
				<text class="text-l font-semibold color-error">¥{{ intlNumberFormat(orderData.orderAmount) }}</text>
			</view> -->
		</view>
		<template #bottom v-if="orderData.status === 0">
			<view class="row-center">
				<view class="flex-1" />
				<view class="mr-3-1">
					<text class="text-l color-main">应付:</text>
					<text class="text-l font-semibold color-error">¥{{ intlNumberFormat(orderData.orderAmount) }}</text>
				</view>
				<view style="width: 200rpx">
					<c-button type="" @touch="toPay" text="去支付" />
				</view>
			</view>
		</template>
	</b-submit-page>
</template>

<script>
import { ref, onMounted, computed } from 'vue';
import { listContactAddresses } from '@/base/api/contact.js';
import { createOrder, getPayInfo, getOrderDetail } from '@/base/api/member.js';
import { intlNumberFormat } from '@/uni-sdk/utils/common.js';
import authCache from '@/uni-sdk/utils/authCache';
import { getOrderStatusText, handlePay } from '@/base/common-business.js';
import dateUtil from '@/uni-sdk/utils/date.js';

export default {
	onLoad(options) {
		this.orderNo = options.orderNo;
		this.loadData();
	},
	setup() {
		const orderNo = ref();
		//data
		const orderData = ref({});
		const deliveryFee = ref(10);
		async function loadData() {
			const data = await getOrderDetail(orderNo.value, true);
			if (data) {
				orderData.value = data;
			}
		}

		function toPay() {
			handlePay(orderNo.value, (re) => {
				if(re) {
					getApp().globalData.toast("支付成功");
					loadData();
				}
			});
		}
		//
		const curGoodWayIndex = ref(1);
		const getGoodWay = ref([
			{ value: 0, label: '自提' },
			{ value: 1, label: '配送' },
		]);
		function getGoodWayChange(e) {
			curGoodWayIndex.value = +e.detail.value;
		}
		//快递上门时间
		const deliveryTimeText = ref('');
		const timeSlotOptions = ref();
		function showTimeSlot() {
			timeSlotOptions.value = {};
		}
		function handleTimeSlotSelect(e) {
			deliveryTimeText.value = e.day.dateText + ' ' + e.timeSlot.text;
		}
		return {
			toPay,
			intlNumberFormat,
			deliveryFee,
			getGoodWay,
			curGoodWayIndex,
			getGoodWayChange,
			timeSlotOptions,
			showTimeSlot,
			handleTimeSlotSelect,
			orderData,
			deliveryTimeText,
			orderNo,
			loadData,
			getOrderStatusText,
			dateFormat: dateUtil.format,
		};
	},
};
</script>

<style></style>
